<template>
  <!-- 默认插槽，组件上的v-slot指令接收子组件插槽参数 -->
  <SlotPropsChildren v-slot="slotProps">
    {{ slotProps }} <!-- { "text": "DefaultText", "count": 10 } -->
    {{ slotProps.text }} <!-- DefaultText -->
    {{ slotProps.count }} <!-- 10 -->
  </SlotPropsChildren>
  <SlotPropsChildren v-slot="{text,count}">
    {{ text }} <!-- DefaultText -->
    {{ count }} <!-- 10 -->
  </SlotPropsChildren>

  <!-- 具名插槽，template上的v-slot指令接收子组件插槽参数 -->
  <SlotPropsChildren>
    <template v-slot:slot-name="slotProps">
      {{ slotProps }} <!-- { "text": "NameText", "count": 20 } -->
      {{ slotProps.text }} <!-- NameText -->
      {{ slotProps.count }} <!-- 20 -->
    </template>
  </SlotPropsChildren>
  <SlotPropsChildren>
    <template v-slot:slot-name="{text,count}">
      {{ text }} <!-- NameText -->
      {{ count }} <!-- 20 -->
    </template>
  </SlotPropsChildren>

  <!-- 默认插槽和具名插槽同时使用，不能在组件上使用v-slot接收插槽参数，默认插槽也是用template -->
  <SlotPropsChildren>
    <template #default="{text,count}">
      {{ text }} <!-- DefaultText -->
    </template>

    <template v-slot:slot-name="{text,count}">
      {{ text }} <!-- NameText -->
    </template>
  </SlotPropsChildren>
</template>

<script>
import {defineComponent} from 'vue';
import SlotPropsChildren from '@/components/slot-params/SlotPropsChildren.vue';

export default defineComponent({
  name: 'SlotProps',
  components: {SlotPropsChildren}
});
</script>

<style scoped>

</style>